<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false" top="80px">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
        <el-form-item prop="name" label="模型名称">
            <el-input v-model="dataForm.name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="type" label="模型类型">
            <ren-select v-model="dataForm.type" dict-type="bigData_type" placeholder="请选择模型类型" style="width:100%"></ren-select>
        </el-form-item>
        <el-form-item prop="version" label="版本号">
            <el-input v-model="dataForm.version" placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="releaseStatus" label="发布状态">
            <el-radio-group v-model="dataForm.releaseStatus">
                <el-radio :label="0">未发布 </el-radio>
                <el-radio :label="1">已发布</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item prop="status" label="状态">
            <el-radio-group v-model="dataForm.status">
                <el-radio :label="1">启用 </el-radio>
                <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item prop="status" label="模型数据">
            <div style="height: 300px;">
                <ace v-if="editInfoShow" v-model="editInfo" :value="editInfo" ref="acefd"></ace>
            </div>
        </el-form-item>

    </el-form>

    <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
</el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
import ace from "@/components/ace/index";
export default {
    data() {
        return {
            visible: false,
            editInfoShow: false,
            editInfo: '',
            dataForm: {
                id: "",
                name: "",
                version: '',
                data: '',
                type: '',
                releaseStatus: 0,
                status: 1,
            },
        };
    },
    components: {
        ace
    },
    computed: {
        dataRule() {
            return {
                name: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }],
                version: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }],
                data: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }],
            };
        },
    },
    methods: {
        init() {
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                this.getInfo();

            });
        },
        // 获取信息
        getInfo() {
            this.$http
                .get(`/sys/bdmc/${this.dataForm.id}`)
                .then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.$nextTick(() => {
                        this.editInfoShow = true;
                        this.editInfo = this.$set(this, 'editInfo', JSON.parse(res.data.data));
                    })
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };

                })
                .catch(() => {});
        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    console.log(this.editInfo)
                    this.dataForm.data = JSON.stringify(this.editInfo);
                    this.$http[!this.dataForm.id ? "post" : "put"](
                            "/sys/bdmc",
                            this.dataForm
                        )
                        .then(({
                            data: res
                        }) => {
                            if (res.code != 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => {});
                });
            },
            1000, {
                leading: true,
                trailing: false
            }
        ),
    },
};
</script>

<style scoped>
::v-deep .ace_editor {
    height: 100% !important;
}

::v-deep .ace-xcode .ace_print-margin {
    display: none
}
</style>
